<template>
    <Table :columns="columns1" :data="value.otherData[value.job]">
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="add(index, row)">Add</Button>
            <Button type="error" size="small" @click="remove(index, row)">Delete</Button>
        </template>
    </Table>
</template>

<script>
export default {
    props: ['value'],
    data() {
        return {
            columns1: [
                { title: 'Name', key: 'name' },
                { title: 'Age', key: 'age' },
                { title: 'action', key: 'action', slot: 'action' }
            ]
        }
    },
    methods: {
        add(index, row) {
            this.value.otherData[this.value.job].splice(index + 1, 0, { name: 'addData', age: 18 })
        },
        remove(index, row) {
            this.value.otherData[this.value.job].splice(index, 1);
        }
    }
}
</script>